<template>
  <div class="app-container">
    <div class="filter-container">  <!-- 增加 删除 按钮  -->
      <el-form>
        <el-form-item>
          <el-button type="success" icon="plus" v-if="hasPerm('project:add')" @click="showCreate()" style='margin-left:100px; '>增加项目
          </el-button>
          <!-- 问题:根据输入的内容 搜索 匹配 显示相关的内容 -->
          <el-select v-model="value" clearable placeholder="请选择" style="width:100px; margin-left:100px;'">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>

          <el-input v-model="input" placeholder="请输入搜索内容" style='width: 800px; margin-left:10px;'></el-input>
          <el-button type="primary" icon="el-icon-search" circle style='margin-left:10px;'></el-button>
        </el-form-item>
      </el-form>
    </div>

<!-- 这是一个 表格 -->
    <el-table
      :data="list" 
      style="width: 97.5%;margin:20px;margin-left:20px;" border v-loading.body="listLoading" element-loading-text="拼命加载中"  fit highlight-current-row>
      <el-table-column align="center" prop="proId" label="项目编号" width="100">
      </el-table-column>
      <el-table-column align="center" prop="userName" label="项目负责人" width="140">
      </el-table-column>
      <el-table-column align="center" prop="telePhone" label="负责人电话" width="140">
      </el-table-column>
      <el-table-column align="center" prop="proName" label="项目名称" width="140">
      </el-table-column>
      <el-table-column align="center" prop="proTime" label="项目时间" width="170">
      </el-table-column>
      <el-table-column align="center" prop="proCost" label="项目成本" width="140">
      </el-table-column>
      <el-table-column align="center" prop="proResource" label="项目资源" width="140">
      </el-table-column>
      <el-table-column align="center" prop="proApprove" label="项目审批" width="140">
      </el-table-column>
      <el-table-column align="center" prop="proState" label="项目状态" width="140">
      </el-table-column>
      <el-table-column align="center" prop="proContent" label="项目内容" width="140">
      </el-table-column>
      <el-table-column align="center" prop="proRemark" label="备注" width="140">
      </el-table-column>
      <el-table-column align="center" prop="" label="操作">
        <template slot-scope="scope">
          <!--<el-button type="danger" size="small" v-if="hasPerm('project:delete')" @click="removePro(scope.$index)">删除项目</el-button>-->
          <el-button type="danger" size="small"  @click="removePro(scope.$index)">删除项目</el-button>
        </template>
      </el-table-column>
    </el-table>

<!-- 分页器 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="listQuery.pageNum"
      :page-size="listQuery.pageRow"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalCout"
      :page-sizes="[10, 20, 50, 100]">
    </el-pagination>

    <!-- 这是一个button 点击弹框 -->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form class="small-space" :model="tempProject" label-position="left" label-width="100px"
               style='width: 600px; margin-left:50px;'>        
        <el-form-item label="项目编号" required>
          <el-input type="text" v-model="tempProject.proId" style="width: 250px;">
          </el-input>
        </el-form-item>
        <el-form-item label="用户ID" required>
          <el-input type="text" v-model="tempProject.userId" style="width: 250px;">
          </el-input>
        </el-form-item>
        <el-form-item label="项目名称" required>
          <el-input type="text" v-model="tempProject.proName" style="width: 250px;">
          </el-input>
        </el-form-item>
        <el-form-item label="项目成本" required>
          <el-input type="text" v-model="tempProject.proCost" style="width: 250px;">
          </el-input>
        </el-form-item>
        <el-form-item label="项目资源" required>
          <el-input type="text" v-model="tempProject.proResource" style="width: 250px;">
          </el-input>
        </el-form-item>
        <el-form-item label="项目内容" required>
          <el-input type="text" v-model="tempProject.proContent" style="width: 250px;">
          </el-input>
        </el-form-item>
        <el-form-item label="备注" style="margin-left:10px">
          <el-input type="text" v-model="tempProject.proRemark" style="width: 250px; margin-left:-10px">
          </el-input>
          <p style="color:#848484;">说明:红色权限为对应菜单内的必选权限</p>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="success" @click="createProject">创 建</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '项目'
        }, {
          value: '选项2',
          label: '用户'
        }, {
          value: '选项3',
          label: '设备'
        }],
        value: '',
        listQuery: {
          pageNum: 1, //页码
          pageRow: 50, //每页条数
        },
        list: [],//表格的数据
        allPermission: [],
        listLoading: false,//数据加载等待动画
        dialogStatus: 'create',
        dialogFormVisible: false,
        textMap: {
          create: '新建项目'
        },
        tempProject: {
          proId: '',
          userId: '',
          proName: '',
          proCost: '',
          proResource: '',
          proContent: '',
          proRemark: '',
        },
      }
    },
    created() {
      this.getList();
    },
    methods: {
      getList() {
        //查询列表
        this.listLoading = true;
        this.api({
          url: "/project/listProjectAll",
          method: "get",
          params: this.listQuery
        }).then(data => {
          this.listLoading = false;
          this.list = data.list;
          this.totalCount = data.totalCount;
        })
      },
      handleSizeChange(val) {
        //改变每页数量
        this.listQuery.pageRow = val
        this.handleFilter();
      },
      handleCurrentChange(val) {
        //改变页码
        this.listQuery.pageNum = val
        this.getList();
      },
      handleFilter() {
        //查询事件
        this.listQuery.pageNum = 1
        this.getList()
      },
      getIndex($index) {
        //表格序号
        return (this.listQuery.pageNum - 1) * this.listQuery.pageRow + $index + 1
      },
      showCreate() {
        //显示新增对话框
        this.tempProject.proId = '';
        this.tempProject.userId = '';
        this.tempProject.proName = '';
        this.tempProject.proCost = '';
        this.tempProject.proResource = '';
        this.tempProject.proApprove = '';
        this.tempProject.peoState = '';
        this.tempProject.permissions = [];
        this.dialogStatus = "create"
        this.dialogFormVisible = true
      },
      removePro($index) {
        let _vue = this;
        this.$confirm('确定删除此项目?', '提示', {
          confirmButtonText: '确定',
          showCancelButton: false,
          type: 'warning'
        }).then(() => {
          let project = _vue.list[$index];
          project.deleteStatus = '2';
          _vue.api({
            url: "/project/deleteProject",
            method: "post",
            data: project,
          }).then(() => {
            _vue.getList()
          }).catch(e => {
            _vue.$message.error("删除失败")
          })
        })
      },
      createProject() {
        if (!this.checkProIdUnique()) {
          return;
        }
        //添加项目
        this.api({
          url: "/project/addProject",
          method: "post",
          data: this.tempProject
        }).then(() => {
          this.getList();
          this.dialogFormVisible = false
        })
      },
      checkProIdUnique(proId) {
        //校验名称重复
        let proIds = this.tempProject.proId;
        if (!proIds) {
          this.$message.error("请填写项目编号");
          return false;
        }
        let projects = this.list;
        let result = true;
        for (let j = 0; j < projects.length; j++) {
          if (projects[j].proIds === proIds) {
            this.$message.error("项目编号已存在");
            result = false;
            break;
          }
        }
        return result;
      },
    }
  }
</script>
<style scoped>
  .requiredPerm {
    color: #ff0e13;
  }
</style>
